<template>
  <view class="table-left-wrapper">
    <view class="header" v-if="activedDay">
      <view>{{ activedDay.month }}月</view>
      <view class="year-text">{{ activedDay.fullDate.slice(0, 4) }}</view>
    </view>
    <view class="relative">
      <scroll-view scroll-y :style="{ maxHeight: maxHeight }" :scroll-with-animation="false" :scroll-top="scrollTop" @scroll="onScroll">
        <view class="body">
          <view class="place-section before" :style="{ width: '100%', height: stockData.beforePlaceHeight + 'px' }"></view>
          <view
            class="left-td"
            v-for="car in stockData.visibleList"
            :key="car.key"
            :class="{ foucs: carSelector && carSelector.c_id == car.carId && car.carId, 'none-td': car.isCarModel, 'b-border': car.border }"
            @click="onSelect(car)"
          >
            <view v-if="car.clashTip" class="clash-t">
              <ve-icon name="exclamation-circle-fill" size="28"></ve-icon>
              <text>存在冲突</text>
            </view>
            <view v-else-if="car.clash"></view>
            <template v-else-if="!car.isCarModel">
              <view class="licenseNo">{{ car.licenseNo }}</view>
              <view class="radio" v-if="selectable">
                <text class="text" v-if="carSelector && car.carId && carSelector.c_id == car.carId">当前车辆</text>
                <ve-icon v-else-if="carSelector.id == car.carId" name="icon-map-check-selected" width="32" height="32" />
                <ve-icon v-else name="icon-map-check" width="32" height="32" />
              </view>
            </template>
          </view>
          <view class="left-td none-td"></view>
          <view class="place-section after" :style="{ width: '100%', height: stockData.afterPlaceHeight + 'px' }"></view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts">
  import { ref, watch, inject, reactive } from 'vue'

  export default {
    props: {
      selectable: Boolean,
      stockData: Object,
      scrollTopRecorder: Object,
      activedDay: Object,
      reachTop: Function,
      reachBottom: Function,
      maxHeight: String,
    },
    emits: ['onScroll'],
    setup(props, { emit }) {
      const carSelector = (props.selectable && inject('carSelector')) || ref({})

      // 选择车辆
      const onSelect = (car: { carId: string }) => {
        if (carSelector.value.c_id == car.carId) {
          return
        }
        // 赋值
        carSelector.value.id = car.carId
        carSelector.value.value = car
      }

      // 滚动top值
      const scrollTop = ref(0)
      // 正在滚动
      const onScroll = (event: Event) => {
        if (event.detail.deltaY != 0 && !manualScrollHandler.flag) {
          emit('onScroll', event.detail.scrollTop)
        }
      }
      /**
       * 用于手动滚动操作的响应式对象。
       *
       * 包含两个属性：
       * - flag: 用于标记当前是否正在进行手动滚动操作。
       * - timer: 用于设置和管理定时器的ID，以便在手动滚动期间取消不必要的自动滚动。
       */
      const manualScrollHandler = reactive({
        flag: false,
        timer: 0,
      })
      watch(
        () => props.scrollTopRecorder,
        ({ triggerType, top }: Record<string, any>) => {
          if (triggerType == 'right') {
            manualScrollHandler.flag = true
            scrollTop.value = top
            if (manualScrollHandler.timer) {
              clearTimeout(manualScrollHandler.timer)
              manualScrollHandler.timer = 0
            }
            manualScrollHandler.timer = setTimeout(() => {
              manualScrollHandler.flag = false
            }, 500)
          }
        },
        { deep: true },
      )
      // 重置滚动位置
      const resetScrollPosition = () => {
        // 需手动设置为 -1，再设置为0，否则可能不生效
        scrollTop.value = -1
        setTimeout(() => {
          scrollTop.value = 0
        }, 0)
      }

      return {
        carSelector,
        scrollTop,
        onScroll,
        onSelect,
        resetScrollPosition,
      }
    },
  }
</script>

<style lang="less" scoped>
  @tdWidth: 110px;
  @tdHeight: 36px;
  @theadHeight: 48px;

  .table-left-wrapper {
    position: absolute;
    left: 0;
    width: @tdWidth;
    z-index: 9;
    .header {
      position: relative;
      padding-top: 10rpx;
      text-align: center;
      height: @theadHeight;
      background: #f4f4f4;
      border-bottom: 1px solid #e3e4e6;
      border-right: 1px solid #e3e4e6;
      // 字
      font-size: 30rpx;
      font-weight: 600;
      color: #191c27;
      line-height: 44rpx;
      .year-text {
        margin-top: -10rpx;
        font-size: 24rpx;
        color: #9ea5bb;
        line-height: 44rpx;
        font-weight: 400;
      }
    }
    .relative {
      position: relative;
    }
    .body {
      z-index: 9;
      .left-td {
        position: relative;
        height: @tdHeight;
        background: #f4f4f4;
        text-align: center;
        // 字
        font-size: 24rpx;
        color: #191c27;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid #e3e4e6;

        &.b-border {
          border-bottom: 1px solid #e3e4e6;
        }

        .licenseNo {
          flex-shrink: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 600;
        }

        .radio {
          justify-content: center;
          display: flex;
        }

        &.foucs {
          // border-top: 1px solid #376eff;
          // border-left: 1px solid #376eff;
          // border-right: 1px solid #376eff;
          background: #d0def9;
          color: #376eff;
          .text {
            font-size: 22rpx;
            font-weight: 400;
          }
        }
        &.none-td {
          background: inherit;
          border: none;
        }
      }
    }
  }

  .place-section {
    position: relative;
    background: #f7f8fa;
  }
  .is-bottom {
    height: @tdHeight;
    background: #f7f8fa;
  }
  .clash-t {
    color: #ff0d0d;
    display: inline-flex;
    align-items: center;
    margin: -42rpx auto 0;
  }
</style>
